<template>
  <div class="MapDrawer">
    <div class="inner">
      <div class="head">
        <div>
          <div class="dropdown" @click="toggleDropdown">
            <button class="dropdown-toggle">路线文件</button>
            <div v-if="isOpen" class="dropdown-menu">
              <div class="dropdown-item" @click.stop="createRoute">
                新建路线
              </div>
              <div class="dropdown-item" @click.stop="saveRoute">保存路线</div>
            </div>
          </div>
        </div>
        <div>
          编辑模式<el-switch
            v-model="isEdit"
            active-color="#13ce66"
            inactive-color="#494141"
          >
          </el-switch>
        </div>
      </div>
      <div class="tools" v-show="isEdit">
        <div
          class="tool"
          @click="setTool('line')"
          :class="{ active: currentTool === 'line' }"
        >
          直线工具
        </div>
        <div
          class="tool"
          @click="setTool('point')"
          :class="{ active: currentTool === 'point' }"
        >
          点工具
        </div>
        <div
          class="tool"
          @click="setTool('drag')"
          :class="{ active: currentTool === 'drag' }"
        >
          拖动工具
        </div>
        <div class="tool" @click="show">显示lines跟points</div>
      </div>
      <!-- 保存弹框 -->
      <el-dialog
        title="路径名称"
        :before-close="close"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <span
          ><span class="dialogText">请输入路径名</span
          ><el-input v-model="input" placeholder="input"></el-input
        ></span>
        <span slot="footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
      <div class="back">
        <el-button @click="back">返回</el-button>
      </div>
      <canvas
        :width="canvasWidth"
        :height="canvasHeight"
        ref="can"
        @mousedown="onMouseDown"
        @mouseup="onMouseUp"
        @mousemove="onMouseMove"
        @contextmenu.prevent="onRightClick"
      ></canvas>
      <div class="scale">
        <div class="zoom" @click="zoomIn">
          <i class="iconfont icon-jiahao1"></i>
        </div>
        <div class="zoom" @click="zoomOut">
          <i class="iconfont icon-jian"></i>
        </div>
      </div>
      <div id="delete">删除</div>
    </div>

    <div class="attribute">
      <div
        v-if="selectedPointIndex !== null"
        v-show="selectedPointIndex !== null"
        style="width: 100%"
        class="attributeBox"
      >
        <div class="type">
          <div class="text">类型：</div>
          <el-select
            v-model="points[selectedPointIndex].type"
            placeholder="points[selectedPointIndex].type"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="name">
          <div class="text">名称：</div>
          <el-input
            v-model="points[selectedPointIndex].name"
            placeholder="名称"
          ></el-input>
        </div>
        <div class="status">
          <div class="text">状态:</div>
          <el-select
            v-model="points[selectedPointIndex].status"
            placeholder="points[selectedPointIndex].status"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="positionX">
          <div class="text">位置坐标X：</div>
          <el-input
            v-model="points[selectedPointIndex].x"
            placeholder="points[selectedPointIndex].x"
            disabled
          ></el-input>
        </div>
        <div class="positionY">
          <div class="text">位置坐标Y：</div>
          <el-input
            v-model="points[selectedPointIndex].y"
            placeholder="points[selectedPointIndex].y"
            disabled
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    url: {
      type: String,
      default: "",
    },
    itemCount: {
      type: Number,
      default: -1,
    },
    Points: {
      type: Array,
      default: () => [],
    },
    Lines: {
      type: Array,
      default: () => [],
    },
    pathName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      canvasWidth: 1000,
      canvasHeight: 500,
      isOpen: false, //下拉菜单是否打开
      isEdit: false, //是否编辑模式
      points: [], //存储所有点的数组
      type: 1, //0：新建路线，1：编辑路线
      foundLine: false, //是否找到线段
      pointX: null, //在已知线段上添加的点的X坐标
      pointY: null, //在已知线段上添加的点的Y坐标
      lines: [], //存储所有线的数组
      startPoint: null, //开始画线的点
      currentPoint: null, //当前画线的点
      endPoint: null, //结束画线的点
      lineColors: "#000000",
      ctx: null,
      backgroundImage: new Image(), //背景图片
      scale: 1, //缩放比例
      offsetX: 0, //偏移量X
      offsetY: 0, //偏移量Y
      isDragging: false, //是否正在拖动
      lastX: 0, //鼠标上次X坐标
      lastY: 0, //鼠标上次Y坐标
      count: 0, //点的数量
      currentTool: null, //当前工具
      selectedPointIndex: null, //当前选中点的索引
      drawingLine: false,
      pointRadius: 8, //点的半径
      mouseX: 0, //鼠标X坐标
      mouseY: 0, //鼠标Y坐标
      //点类型选项
      typeOptions: [
        {
          value: "普通点",
          label: "普通点",
        },
        {
          value: "交通控制点",
          label: "交通控制点",
        },
        {
          value: "充电点",
          label: "充电点",
        },
        {
          value: "待机点",
          label: "待机点",
        },
        {
          value: "目标点",
          label: "目标点",
        },
      ],
      //点状态选项
      statusOptions: [
        {
          value: "畅通",
          label: "畅通",
        },
        {
          value: "拥堵",
          label: "拥堵",
        },
        {
          value: "拥挤",
          label: "拥挤",
        },
        {
          value: "严重拥堵",
          label: "严重拥堵",
        },
        {
          value: "严重拥挤",
          label: "严重拥挤",
        },
      ],
      dialogVisible: false, //保存弹框是否显示
      input: "", //保存弹框输入框内容,即pathName
    };
  },
  mounted() {
    this.ctx = this.$refs.can.getContext("2d");
    this.backgroundImage.src = this.url; // 替换为你的图像 URL
    this.backgroundImage.onload = () => {
      this.redraw();
    };
    this.input = this.pathName;
    this.points = [...this.Points];
    this.lines = [...this.Lines];

    // this.ctx.drawImage(this.backgroundImage, 0, 0, this.canvasWidth, this.canvasHeight);
  },
  watch: {
    points: {
      handler(newVal, oldVal) {
        this.redraw();
      },
      deep: true,
    },
    // type: {
    //   handler(newVal, oldVal) {
    //     this.onMouseDown();
    //   },
    // },
  },
  methods: {
    //控制显示头部路线文件下拉菜单
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    //新建路线
    createRoute() {
      // 这里可以调用新建路线的逻辑
      console.log("新建路线");
      this.$emit("add", this.url);
      this.isOpen = false; // 选择后关闭下拉菜单
      this.points = []; // 清空点数组
      this.lines = []; // 清空线数组
      this.count = 0; // 点的数量
      this.input = ""; // 路径名
      this.redraw(); // 重新绘制
      this.type = 0; // 设置为新建路线模式
    },
    //保存路线
    saveRoute() {
      // 这里可以调用保存路线的逻辑
      console.log("保存路线");
      this.dialogVisible = true; // 打开保存弹框
      this.isOpen = false; // 选择后关闭下拉菜单
    },

    //控制台输出points、lines数据
    show() {
      console.log("points:", this.points);
      console.log("lines:", this.lines);
    },
    //画布拖动 鼠标滚动@wheel事件
    // zoom() {
    //   event.preventDefault();
    //   const mouseX = event.offsetX;
    //   const mouseY = event.offsetY;

    //   // 计算缩放比例
    //   const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9;
    //   const newScale = this.scale * zoomFactor;

    //   // 计算新的偏移量以保持鼠标位置不变
    //   const newOffsetX =
    //     mouseX - (mouseX - this.offsetX) * (newScale / this.scale);
    //   const newOffsetY =
    //     mouseY - (mouseY - this.offsetY) * (newScale / this.scale);

    //   // 更新缩放和偏移量
    //   this.scale = newScale;
    //   this.offsetX = newOffsetX;
    //   this.offsetY = newOffsetY;

    //   this.redraw();
    // },
    startDrag() {
      this.isDragging = true;
      this.$refs.can.style.cursor = "grabbing";
      this.lastX = event.offsetX;
      this.lastY = event.offsetY;
    },
    onDrag() {
      if (this.isDragging) {
        const dx = event.offsetX - this.lastX;
        const dy = event.offsetY - this.lastY;
        // 计算新的偏移量
        let newOffsetX = this.offsetX + dx;
        let newOffsetY = this.offsetY + dy;

        // 限制偏移量，确保不超出画布总面积
        const imageWidth = this.backgroundImage.width * this.scale;
        const imageHeight = this.backgroundImage.height * this.scale;

        // 计算边界
        if (newOffsetX > 0) {
          newOffsetX = 0; // 不允许向右拖动超出边界
        } else if (newOffsetX < this.canvasWidth - imageWidth) {
          newOffsetX = this.canvasWidth - imageWidth; // 不允许向左拖动超出边界
        }

        if (newOffsetY > 0) {
          newOffsetY = 0; // 不允许向下拖动超出边界
        } else if (newOffsetY < this.canvasHeight - imageHeight) {
          newOffsetY = this.canvasHeight - imageHeight; // 不允许向上拖动超出边界
        }

        // 更新偏移量
        this.offsetX = newOffsetX;
        this.offsetY = newOffsetY;

        this.lastX = event.offsetX;
        this.lastY = event.offsetY;
        this.redraw();
      }
    },
    endDrag() {
      this.$refs.can.style.cursor = "grab";
      this.isDragging = false;
    },

    //画布缩放
    zoomIn() {
      this.scale += 0.1; // 放大
      this.redraw(); // 重新绘制
    },
    zoomOut() {
      if (this.scale > 0.9) {
        // 防止缩小到负值
        this.scale -= 0.1; // 缩小
      }
      this.redraw(); // 重新绘制
    },

    //鼠标点击方法
    onMouseDown() {
      document.getElementById("delete").style.display = "none";
      if (this.currentTool === "line") {
        this.startLineDrawing();
      } else if (this.currentTool === "point") {
        this.addpoint();
      } else if (this.currentTool === "drag") {
        this.startDrag();
      }
      this.isOpen = false;
    },
    //鼠标移动方法
    onMouseMove() {
      if (this.currentTool === "line") {
        this.handleMouseMove();
      } else if (this.currentTool === "point") {
        this.mouseHoverPoint();
      } else if (this.currentTool === "drag") {
        this.onDrag();
      }
    },
    //鼠标松开方法
    onMouseUp() {
      if (this.currentTool === "line") {
        this.handleMouseUp();
      } else if (this.currentTool === "drag") {
        this.endDrag();
      }
    },

    //增加点
    addpoint() {
      //获取点击的坐标
      const rect = this.$refs.can.getBoundingClientRect();
      var x = (event.clientX - rect.left - this.offsetX) / this.scale;
      var y = (event.clientY - rect.top - this.offsetY) / this.scale;
      // 检查是否点击了已存在的点
      for (let i = 0; i < this.points.length; i++) {
        const point = this.points[i];
        const distance = Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2);
        if (distance < this.pointRadius) {
          this.selectPoint(i); // 如果点击的是已存在的点，选择它
          return;
        }
      }
      //在已知线段上新增点
      if (this.pointX && this.pointY) {
        this.count++;
        this.points.push({
          x: this.pointX,
          y: this.pointY,
          type: "普通点",
          status: "畅通",
          index: this.count,
          name: "点" + this.count,
        });
        this.drawPoint(this.pointX, this.pointY, this.count);
        this.pointX = null;
        this.pointY = null;
        return;
      }
      // 增加新的点
      this.count++;
      this.points.push({
        x: x,
        y: y,
        type: "普通点",
        status: "畅通",
        index: this.count, // 点的真实索引（从1开始）
        name: "点" + this.count,
      });
      //调用画点的方法 默认是圆（普通点）,count需自己定义，他是你想写入圆内的文本
      // console.log("现有点：", this.points);
      this.drawPoint(x, y, this.count);
    },
    //选择点
    selectPoint(index) {
      this.selectedPointIndex = index;
      // console.log("选中的点：",index);
      this.redraw();
    },
    //绘制点的方法  x和y是坐标，coun是圆上的文本
    drawPoint(x, y, coun, type = "普通点", index = 0) {
      if (type === "普通点") {
        this.ctx.beginPath();
        //参数：圆心的 x 和 y 坐标、半径、起始角度和结束角度
        this.ctx.arc(
          x * this.scale + this.offsetX,
          y * this.scale + this.offsetY,
          8,
          0,
          2 * Math.PI
        );

        // 圆
        this.ctx.font = "20px Arial";
        this.ctx.fillStyle = "#000000";
        this.ctx.fill();
        this.ctx.closePath();
        // 填充圆内文本
        // this.ctx.font = "15px Arial";
        // this.ctx.fillStyle = "#fff";
        // this.ctx.textAlign = "center";
        // this.ctx.fillText(coun, x, y + 5);

        //绘制边框
        if (index === this.selectedPointIndex) {
          this.ctx.beginPath();
          this.ctx.strokeStyle = "skyblue"; // 设置边框颜色
          this.ctx.strokeRect(
            x * this.scale + this.offsetX - 15,
            y * this.scale + this.offsetY - 15,
            30,
            30
          ); // 绘制矩形边框
          this.ctx.closePath();
        } else {
          this.ctx.beginPath();
          this.ctx.strokeStyle = "gray"; // 设置边框颜色
          this.ctx.strokeRect(
            x * this.scale + this.offsetX - 15,
            y * this.scale + this.offsetY - 15,
            30,
            30
          ); // 绘制矩形边框
          this.ctx.closePath();
        }
      } else if (type === "充电点") {
        this.ctx.beginPath();
        // 矩形
        this.ctx.font = "20px Arial";
        this.ctx.fillStyle = "green";
        //参数为：x, y, width, height
        this.ctx.fillRect(
          x * this.scale + this.offsetX - 5,
          y * this.scale + this.offsetY - 10,
          10,
          20
        );
        this.ctx.fill();
        this.ctx.closePath();
        // 填充矩形文本
        // this.ctx.font = "15px Arial";
        // this.ctx.fillStyle = "#fff";
        // this.ctx.textAlign = "center";
        // this.ctx.textBaseline = "middle";
        // this.ctx.fillText(coun, x, y);
        //绘制边框
        if (index === this.selectedPointIndex) {
          this.ctx.beginPath();
          this.ctx.strokeStyle = "skyblue"; // 设置边框颜色
          this.ctx.strokeRect(
            x * this.scale + this.offsetX - 15,
            y * this.scale + this.offsetY - 15,
            30,
            30
          ); // 绘制矩形边框
          this.ctx.closePath();
        } else {
          this.ctx.beginPath();
          this.ctx.strokeStyle = "gray"; // 设置边框颜色
          this.ctx.strokeRect(
            x * this.scale + this.offsetX - 15,
            y * this.scale + this.offsetY - 15,
            30,
            30
          ); // 绘制矩形边框
          this.ctx.closePath();
        }
      }
    },
    //鼠标悬停点
    mouseHoverPoint() {
      this.foundLine = false;
      const rect = this.$refs.can.getBoundingClientRect();
      const x = (event.clientX - rect.left - this.offsetX) / this.scale;
      const y = (event.clientY - rect.top - this.offsetY) / this.scale;
      this.lines.forEach((line) => {
        if (
          this.isPointOnLine(
            { x: x, y: y },
            {
              start: { x: line.startX, y: line.startY },
              end: { x: line.endX, y: line.endY },
            }
          )
        ) {
          // 此时鼠标在线上，计算当前线段斜率，大概算出鼠标在线段上的位置
          const k = (-line.endY - -line.startY) / (line.endX - line.startX);
          const b = -line.endY - k * line.endX;
          this.pointX = x;
          this.pointY = -(k * x + b);
          this.$refs.can.style.cursor = "pointer";
          this.foundLine = true;
          return;
        }
        // else {
        //   this.pointX = null;
        //   this.pointY = null;
        //   this.$refs.can.style.cursor = "crosshair";
        // }
        if (!this.foundLine) {
          this.pointX = null;
          this.pointY = null;
          this.$refs.can.style.cursor = "crosshair";
        }
      });
    },

    //设置工具方法
    setTool(tool) {
      this.currentTool = tool;
      this.drawingLine = tool === "line";
      if (tool === "drag") {
        this.$refs.can.style.cursor = "grab";
      } else {
        this.$refs.can.style.cursor = "crosshair";
      }
      this.selectedPointIndex = null; // 退出线条绘制时清空选中点
      this.redraw();
    },

    //直线绘制  鼠标点击事件
    startLineDrawing() {
      const rect = this.$refs.can.getBoundingClientRect();
      const x = (event.clientX - rect.left - this.offsetX) / this.scale;
      const y = (event.clientY - rect.top - this.offsetY) / this.scale;
      // 找到点击的点，作为起点
      this.points.find((point, index) => {
        const distance = Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2);
        if (distance < this.pointRadius) {
          this.selectPoint(index);
          this.startPoint = { x: point.x, y: point.y };
          this.drawingLine = true;
          this.lines.push({
            startX: this.startPoint.x,
            startY: this.startPoint.y,
          });
          // console.log("开始画线：", this.lines);
        }
      });
    },
    //直线绘制  鼠标结束事件
    handleMouseUp() {
      if (this.drawingLine && this.startPoint) {
        const rect = this.$refs.can.getBoundingClientRect();
        const x = (event.clientX - rect.left - this.offsetX) / this.scale;
        const y = (event.clientY - rect.top - this.offsetY) / this.scale;
        // 完成线条绘制
        // 在绘制结束时，将当前的终点添加到最后一条线条中
        const point = this.points.find((point) => {
          const distance = Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2);
          if (distance < this.pointRadius) {
            return point;
          }
        });
        // console.log(point);
        if (point) {
          this.endPoint = { x: point.x, y: point.y };
          this.lines[this.lines.length - 1].endX = this.endPoint.x;
          this.lines[this.lines.length - 1].endY = this.endPoint.y;
          this.drawingLine = false;
          this.startPoint = null;
          this.currentPoint = null;
        } else {
          this.lines.pop();
          this.drawingLine = false;
          this.startPoint = null;
          this.currentPoint = null;
        }
      }
      this.selectedPointIndex = null; // 退出线条绘制时清空选中点
      this.redraw();
    },
    //直线绘制  鼠标移动事件  绘制临时线条
    handleMouseMove() {
      if (this.drawingLine && this.startPoint) {
        // 绘制临时线条
        const rect = this.$refs.can.getBoundingClientRect();
        const x = (event.clientX - rect.left - this.offsetX) / this.scale;
        const y = (event.clientY - rect.top - this.offsetY) / this.scale;
        this.currentPoint = { x, y };
        const ctx = this.$refs.can.getContext("2d");
        ctx.strokeStyle = "gray";
        ctx.beginPath();
        ctx.moveTo(
          this.startPoint.x * this.scale + this.offsetX,
          this.startPoint.y * this.scale + this.offsetY
        );
        ctx.lineTo(
          x * this.scale + this.offsetX,
          y * this.scale + this.offsetY
        );
        ctx.stroke();
        ctx.closePath();
        this.startPoint = this.currentPoint;
      }
    },
    //每绘制一条直线或者更改点的类型 => 重新更新画布
    redraw() {
      // 绘制背景图像，保持比例并填充画布
      if (this.backgroundImage.src) {
        this.backgroundImage.setAttribute("crossOrigin", "anonymous");
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.ctx.save();
        this.ctx.translate(this.offsetX, this.offsetY);
        this.ctx.scale(this.scale, this.scale);
        this.ctx.drawImage(
          this.backgroundImage, // 源图像
          0,
          0,
          this.canvasWidth,
          this.canvasHeight
        );
        this.ctx.restore();
      }
      // 重新绘制所有已绘制的点
      this.points.forEach((point, index) => {
        this.drawPoint(point.x, point.y, point.index, point.type, index);
      });
      // 重新绘制所有已绘制的线条
      this.lines.forEach((line) => {
        if (line.endX !== undefined && line.endY !== undefined) {
          this.drawLine(line.startX, line.startY, line.endX, line.endY);
        }
      });
    },
    //绘制线条
    drawLine(x1, y1, x2, y2) {
      const ctx = this.$refs.can.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(
        x1 * this.scale + this.offsetX,
        y1 * this.scale + this.offsetY
      );
      ctx.lineTo(
        x2 * this.scale + this.offsetX,
        y2 * this.scale + this.offsetY
      );
      ctx.strokeStyle = "gray";
      ctx.lineWidth = 2; // 设置线条宽度
      ctx.stroke();
      ctx.closePath();
    },

    //右键删除事件
    onRightClick() {
      if (this.currentTool === "line") {
        this.deleteLine();
      } else if (this.currentTool === "point") {
        this.deletePoint();
      }
    },
    //删除线段
    deleteLine() {
      const canvas = this.$refs.can;
      const rect = canvas.getBoundingClientRect();
      this.mouseX = (event.clientX - rect.left - this.offsetX) / this.scale;
      this.mouseY = (event.clientY - rect.top - this.offsetY) / this.scale;
      this.checkLineForDeletion(); // 检查右键点击的线段是否可以删除
    },
    //检查右键点击的线段是否可以删除
    checkLineForDeletion() {
      for (let i = 0; i < this.lines.length; i++) {
        const line = this.lines[i];
        if (
          this.isPointOnLine(
            { x: this.mouseX, y: this.mouseY },
            {
              start: { x: line.startX, y: line.startY },
              end: { x: line.endX, y: line.endY },
            }
          )
        ) {
          // if (confirm("是否删除该线段？")) {
          //   this.lines.splice(i, 1); // 删除线段
          //   this.redraw(); // 重新绘制画布
          // }
          document.getElementById("delete").style.display = "block";
          document.getElementById("delete").style.left =
            this.mouseX * this.scale + this.offsetX + 40 + "px";
          document.getElementById("delete").style.top =
            this.mouseY * this.scale + this.offsetY + "px";
          document.getElementById("delete").onclick = () => {
            this.lines.splice(i, 1); // 删除线段
            this.redraw(); // 重新绘制画布
            document.getElementById("delete").style.display = "none";
          };
          this.selectedPointIndex = null; // 退出线条选中状态
          this.redraw();
          return;
        }
      }
    },
    //判断点是否在线段上
    isPointOnLine(point, line) {
      const { start, end } = line;
      const d1 = this.distance(point, start);
      const d2 = this.distance(point, end);
      const lineLength = this.distance(start, end);
      const buffer = 0.5; // 允许的误差范围
      return d1 + d2 <= lineLength + buffer && d1 + d2 >= lineLength - buffer; // 判断点是否在线段上
    },
    //计算两点之间的距离
    distance(p1, p2) {
      return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
    },

    //删除点
    deletePoint() {
      const canvas = this.$refs.can;
      const rect = canvas.getBoundingClientRect();
      this.mouseX = (event.clientX - rect.left - this.offsetX) / this.scale;
      this.mouseY = (event.clientY - rect.top - this.offsetY) / this.scale;
      this.checkpointForDeletion(); // 检查右键点击的点是否可以删除
    },
    //检查右键点击的点是否可以删除
    checkpointForDeletion() {
      for (let i = 0; i < this.points.length; i++) {
        const point = this.points[i];
        const distance = Math.sqrt(
          (this.mouseX - point.x) ** 2 + (this.mouseY - point.y) ** 2
        );
        if (distance < this.pointRadius) {
          document.getElementById("delete").style.display = "block";
          document.getElementById("delete").style.left =
            this.mouseX * this.scale + this.offsetX + 40 + "px";
          document.getElementById("delete").style.top =
            this.mouseY * this.scale + this.offsetY + "px";
          document.getElementById("delete").onclick = () => {
            this.points.splice(i, 1); // 删除点
            this.redraw(); // 重新绘制画布
            document.getElementById("delete").style.display = "none";
            this.mouseX = null;
            this.mouseY = null;
          };
          this.selectedPointIndex = null; // 退出点选中状态
          this.redraw();
          return;
        }
      }
    },
    //保存路线
    save() {
      // const canvas = this.$refs.can;
      // const link = document.createElement("a");
      // link.download = "canvas-image.png"; // 设置下载文件名
      // link.href = canvas.toDataURL("image/png"); // 获取 Canvas 数据

      // // 触发下载
      // link.click();
      const canvas = this.$refs.can;
      const url = canvas.toDataURL("image/png");
      // console.log({url:this.url,newUrl:url,lines:this.lines,points:this.points,pathname:this.pathname})
      this.$emit("save", {
        url: this.url,
        newUrl: url,
        lines: this.lines,
        points: this.points,
        pathName: this.input,
        count: this.itemCount,
      });
    },
    back() {
      this.$emit("back");
    },
    close() {
      this.input = this.pathName;
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.MapDrawer {
  height: 100vh;
  position: relative;
  .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 80%;
    .head {
      display: flex;
      justify-content: space-between;
      width: 85%;
      .dropdown {
        .dropdown-toggle {
          background: #494141;
          color: #fff;
          padding: 0 20px;
          cursor: pointer;
        }
        .dropdown-menu {
          position: absolute;
          z-index: 1;
          .dropdown-item {
            background: #494141;
            padding: 5px 20px;
            z-index: 10;
            &:hover {
              background: #3a3535;
              cursor: pointer;
            }
            &:last-child {
              border-radius: 0 0 5px 5px;
            }
          }
        }
      }
    }
    canvas {
      background: #fff;
      display: block;
      cursor: crosshair;
    }
    .tools {
      position: absolute;
      top: 30px;
      background: #7a7878;
      display: flex;
      .tool {
        background: #5c5757;
        padding: 10px;
        margin: 0 5px;
        cursor: pointer;
        &:hover {
          background: #4b4a4a;
        }
        &.active {
          background: #3a3535;
        }
      }
    }
    .back {
      position: absolute;
      top: 30px;
      right: 90px;
      opacity: 0.8;
    }
    #delete {
      background: #000;
      position: absolute;
      display: none;
      padding: 5px;
      cursor: pointer;
      border-radius: 5px;
      &:hover {
        background: #787575;
      }
    }
    .scale {
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      position: absolute;
      top: 30px;
      left: 90px;
      background: #fff;
      border: 1px solid #000;
      color: #000;
      .zoom {
        padding: 5px;
        &:nth-child(1)::after {
          content: "";
          width: 100%;
          height: 1px;
          background: #979595;
          position: absolute;
          top: 50%;
          left: 0;
        }
        i:hover {
          cursor: pointer;
        }
      }
    }
  }
  .attribute {
    height: 150px;
    background: #494141;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-bottom: 10px;
    // border: 1px solid #fff;
    .attributeBox {
      display: flex;
      flex-wrap: wrap;
      .text {
        color: #7a7878;
      }
      //对选择框的样式设置
      /deep/.el-select .el-input__inner {
        width: 230px;
        padding-left: 0;
        color: #ddd4d4;
        background: transparent;
        border: none;
        border-bottom: 1px solid #c5c2c2;
      }

      //下拉框样式设置
      /deep/.el-select-dropdown__list {
        background: #494141;
        border: none;
        color: #fff;
      }
      //选中样式设置
      /deep/.el-select-dropdown__item.selected {
        color: #e64b4b;
      }
      /deep/.el-scrollbar__wrap {
        background: #494141;
        border: none;
        color: #fff !important;
      }
      /deep/.el-popper .popper__arrow::after {
        background: #494141;
      }

      //输入框样式设置
      /deep/.el-input__inner {
        width: 230px;
        background: transparent;
        color: #ddd4d4;
        border: none;
        border-bottom: 1px solid #c5c2c2;
        padding-left: 0;
      }
      .type {
        width: 20%;
        margin: 10px;
      }
      .name {
        margin: 10px;
        width: 20%;
      }
      .status {
        margin: 10px;
        width: 20%;
      }
      .positionX {
        margin: 10px;
        width: 20%;
      }
      .positionY {
        margin: 10px;
        width: 20%;
      }
    }
  }
  /deep/.el-dialog {
    background: #494141;
    .el-dialog__title {
      // display: none;
      color: #fff;
    }
    .el-dialog__body {
      color: #fff;
      .dialogText {
        color: #41e2e2;
      }
      .el-input__inner:hover,
      .el-input__inner,
      .el-select-dropdown__item.is-disabled:hover {
        padding: 0;
      }
      .el-input__inner {
        height: 25px;
        background: transparent;
        border: none;
        border-bottom: 1px solid #41e2e2;
        color: #fff;
      }
    }
    .el-dialog__footer {
      padding: 0 20px 20px;
    }
  }
}
</style>
